:root {
  /* 红、橙、黄、绿、蓝、靛、紫 */
  --color-ball-0: #7D3C98;
  --color-ball-1: #0a0b08;
  --color-ball-2: #e20f1b;
  --color-ball-3: #368f0f;
  --color-ball-4: #e39621;
  --color-ball-5: #336ecf;
  --color-ball-6: #c23bf0;
  --color-ball-7: #00a3e8;
  --color-bg-1: rgba(10, 11, 8, 0.1);
  --color-bg-2: rgba(226, 15, 27, 0.1);
  --color-bg-3: rgba(54, 143, 15, 0.1);
  --color-bg-4: rgba(227, 150, 33, 0.1);
  --color-bg-5: rgba(51, 110, 207, 0.1);
  --color-bg-6: rgba(194, 59, 240, 0.1);
  --color-bg-7: rgba(0, 163, 232, 0.1);
  --color-bg-middle-1: rgba(10, 11, 8, 0.2);
  --color-bg-middle-2: rgba(226, 15, 27, 0.2);
  --color-bg-middle-3: rgba(54, 143, 15, 0.2);
  --color-bg-middle-4: rgba(227, 150, 33, 0.2);
  --color-bg-middle-5: rgba(51, 110, 207, 0.2);
  --color-bg-middle-6: rgba(194, 59, 240, 0.2);
  --color-bg-middle-7: rgba(0, 163, 232, 0.2);
}

html {
  font-size: 12px
}

/* table */
.table-wave {
  display: flex;
}

.table-lighting {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.table-firework {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.row {
  display: flex;
}

.cell {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: solid 1px #CCC;
  margin: 1px;
  text-align: center;
  position: relative;
}

/** ball style */
.ball {
  border: 1px solid #CCC;
  border-radius: 50%;
  color: #FFFFFF;
  width: 20px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: -1;
}

.ball-0 {
  background-color: var(--color-ball-0);
}

.ball-1 {
  background-color: var(--color-ball-1);
}

.ball-2 {
  background-color: var(--color-ball-2);
}

.ball-3 {
  background-color: var(--color-ball-3);
}

.ball-4 {
  background-color: var(--color-ball-4);
}

.ball-5 {
  background-color: var(--color-ball-5);
}

.ball-6 {
  background-color: var(--color-ball-6);
}

.ball-7 {
  background-color: var(--color-ball-7);
}

.bg-light {
  background-color: #FFFFFF;
}

.bg-1 {
  background-color: var(--color-bg-1);
}

.bg-2 {
  background-color: var(--color-bg-2);
}

.bg-3 {
  background-color: var(--color-bg-3);
}

.bg-4 {
  background-color: var(--color-bg-4);
}

.bg-5 {
  background-color: var(--color-bg-5);
}

.bg-6 {
  background-color: var(--color-bg-6);
}

.bg-7 {
  background-color: var(--color-bg-7);
}

.bg-middle-1 {
  background-color: var(--color-bg-middle-1);
}

.bg-middle-2 {
  background-color: var(--color-bg-middle-2);
}

.bg-middle-3 {
  background-color: var(--color-bg-middle-3);
}

.bg-middle-4 {
  background-color: var(--color-bg-middle-4);
}

.bg-middle-5 {
  background-color: var(--color-bg-middle-5);
}

.bg-middle-6 {
  background-color: var(--color-bg-middle-6);
}

.bg-middle-7 {
  background-color: var(--color-bg-middle-7);
}

.order1,
.order2 {
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 8px;
  height: 8px;
  opacity: .6;
}

.order1 {
  left: 8px;
  clip-path: polygon(60% 0, 100% 100%, 0 100%);
}

.order2 {
  right: 8px;
  clip-path: polygon(0 0, 100% 0, 60% 100%);

}

.icon-plus::before {
  content: '+';
  margin-right: -1px;
}

.el-dialog__body {
  padding: 10px !important;
}

.el-dialog__header {
  padding: 10px !important;
  padding-bottom: 0 !important;
}

.el-dialog__title {
  font-size: 16px !important;
}

.el-dialog__headerbtn {
  width: 36px !important;
  height: 36px !important
}

/* 骨架屏 */
.skeleton {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.skeleton:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
  display: block;
  border-radius: 2px;
}

.mini-tabs .el-tabs__item {
  font-size:12px;
  height:28px;
}
.mini-tabs .el-tabs__header{
  margin-bottom:6px;
}